<template>
  <q-layout view="hHh lpR fFf">
    <q-header class="tw-text-black tw-bg-transparent dark:tw-bg-black dark:tw-text-white"
              height-hint="98">
      <div class="row justify-between items-center">
        <div class="col-3">
          <q-icon @click="changeTheme()" v-if="mode==='light'" class="q-ml-lg icon-mouse" size="20px"
                  :name="outlinedLightMode" />
          <q-icon v-else class="q-ml-lg icon-mouse " @click="changeTheme()" size="20px" :name="outlinedDarkMode" />
        </div>
        <div v-if="screen.width>800" class="col-6">
          <q-tabs align="right" class="q-mr-lg">
            <q-route-tab class="q-ma-sm" to="/" label="home" />
            <q-route-tab class="q-ma-sm" to="/about" label="About Me" />
            <q-route-tab class="q-ma-sm" to="/blog" label="Blog" />
            <q-route-tab class="q-ma-sm" to="/notes" label="notes" />
            <q-route-tab class="q-ma-sm" to="/others" label="others" />
          </q-tabs>
        </div>
        <div v-else>
          <q-fab icon="menu"  :flat="true" unelevated   direction="down">
            <q-fab-action icon="home" to="/"></q-fab-action>
            <q-fab-action :icon="outlinedAccountCircle " to="/about"></q-fab-action>
            <q-fab-action icon="airplay" to="/blog"></q-fab-action>
            <q-fab-action icon="book" to="/notes"></q-fab-action>
            <q-fab-action icon="settings" to="/others"></q-fab-action>

          </q-fab>

        </div>
      </div>
    </q-header>

    <q-page-container class="dark:tw-bg-black">
      <router-view />
    </q-page-container>

  </q-layout>
</template>
<script>
import { defineComponent, ref, watchEffect, getCurrentInstance, onMounted, watch } from "vue";
import { outlinedDarkMode, outlinedLightMode,outlinedAccountCircle } from "@quasar/extras/material-icons-outlined";
import { useQuasar } from "quasar";

export default defineComponent({
  name: "MainLayout",
  setup() {
    const $q = useQuasar();
    let screen = ref($q.screen);
    let mode = ref('light')
    let fab_index = ref(0);
    const changeTheme = () => {
      if (mode.value === "dark") {
        mode.value = "light";
        document.documentElement.classList.remove('tw-dark')
      } else {
        document.documentElement.classList.add('tw-dark')
        mode.value = "dark";
      }
    };


    return {
      outlinedDarkMode,
      outlinedLightMode,
      outlinedAccountCircle,
      mode,
      changeTheme,
      screen,
      fab_index
    };
  }
});
</script>

<style scoped>

.icon-mouse {
  cursor: pointer;
}

</style>
